<template>
  <div class="user-container">
    <layout-template>
      <template slot="left-panel">
        <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>
        <el-tree
          ref="tree2"
          :data="data2"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          default-expand-all
        />
      </template>
      <template slot="right-panel">
        <el-transfer
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入搜索内容"
          v-model="value"
          :data="data"
        >
        </el-transfer>
      </template>
    </layout-template>
  </div>
</template>

<script>
import layoutTemplate from '@/layout/components/windowFrame/frame';

export default {
  components: { layoutTemplate },
  mounted() {

  },

  data() {
    return {
      filterText: '',
      device_list: null,
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      data: [],
      value: [],
      filterMethod(query, item) {

      }

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>
